import React from 'react';
import { useLocation, useHistory } from 'react-router-dom'
import {
    Form,
    Input,
    Button,
    Toast,
    Modal
} from 'antd-mobile';
// 引入导航条组件
import Mynavbar from '@/components/Mynavbar';

//导入接口
import { registApi } from '@/api/regist'
const Step3 = () => {
    const his = useHistory()
    const loc = useLocation()
    const tel = loc.state.tel
    const checkPassword = (_, value) => {
        if (/^\w{6}$/.test(value)) {
            return Promise.resolve()
        }
        return Promise.reject(new Error('密码输入有误!'))
    }

    const onFinish = (val) => {
        //调用注册接口
        registApi({
            ...val,
            tel
        }).then(res => {
            // console.log(res);

            Modal.alert({
                content: res.data.message,
                onConfirm: () => {
                    if (res.data.code == 200) {
                        his.push('/login')
                    }
                },
            })

        })

    }
    return (
        <div>
            {/* 头部导航条 */}
            <Mynavbar></Mynavbar>
            {/* 表单 */}
            <Form
                layout='horizontal'
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        下一步
                    </Button>
                }
            >
                <Form.Item
                    name='password'
                    label='密码'
                    rules={[{ validator: checkPassword }]}
                >
                    <Input onChange={console.log} placeholder='密码为6位字符' />
                </Form.Item>
            </Form>
        </div>
    );
}

export default Step3;
